<template>
  <div id="contsainer"></div>
</template>
<script>
export default {
  data() {
    return {
      viewer: null
    }
  },
  mounted() {
    this.initCesium()
    this.addPerInstanceColorAppearance(this.viewer)
  },
  methods: {
    initCesium() {
      this.viewer = new Cesium.Viewer('contsainer', {
        animation: false,
        baseLayerPicker: false,
        fullscreenButton: false,
        geocoder: false,
        homeButton: false,
        infoBox: false,
        sceneModePicker: false,
        navigationHelpButton: false,
        scene3DOnly: true,
        timeline: false,
        selectionIndicator: false, //是否显示选取指示器组件
        shouldAnimate: false, //自动播放动画控件
        shadows: true, //是否显示光照投射的阴影
        terrainShadows: Cesium.ShadowMode.RECEIVE_ONLY, //地质接收阴影
        sceneMode: Cesium.SceneMode.SCENE3D
      })
      this.viewer._cesiumWidget._creditContainer.style.display = 'none' //	去除版权信息
    },
    addPerInstanceColorAppearance(viewer) {

      let instance = new Cesium.GeometryInstance({
        geometry : new Cesium.WallGeometry({
          positions : Cesium.Cartesian3.fromDegreesArrayHeights([
            109.0, 37.0, 10000.0,
            109.0, 38.0, 10000.0,
            105.0, 38.0, 10000.0,
            105.0, 37.0, 10000.0,
            109.0, 37.0, 10000.0
          ])
        }),
        attributes : {
          color : new Cesium.ColorGeometryInstanceAttribute(0.0, 1.0, 0.0, 0.2)
        }
      });

      let primitive = new Cesium.Primitive({
        geometryInstances : instance,
        appearance : new Cesium.PerInstanceColorAppearance({
          translucent : false,//是否对透明有影响
          closed: false,//false 两面绘制，true单面绘制
          faceForward:false,//为false，不收光照控制
          renderState : {
            depthTest : {
              enabled : true //开启深度测试
            }
            /* cull : {
               enabled : true,
               face : Cesium.CullFace.BACK//只绘制背面
             }*/


          }})
      });

      viewer.scene.primitives.add(primitive);
      viewer.camera.flyTo({
        destination:Cesium.Cartesian3.fromDegrees(105,38,200000),
        orientation:{
        //  设置相机的heading pitch roll
          heading:Cesium.Math.toRadians(90),
          pitch:Cesium.Math.toRadians(-40),
          roll:0
        },
        duration:10
      })
    }
  }
}
</script>
<style scoped>
#contsainer {
  height: 100%;
  width: 100%;
  background-color: red;
}
</style>
